<template>
<div>
	 <router-link tag="div" to="/" class="header-abs" v-show="showAbs">
	   <div class="iconfont header-abs-back">&#xe624;</div>
	 </router-link>
	  <router-link tag="div" to="/" class="header-fixed"  v-show="!showAbs" :style="opacityStyle">
	    <div class="iconfont header-fixed-back">&#xe624;</div><div class="header-title">景点</div>
	  </router-link>
</div>
</template>
<script>
export default {
	name:'DetailHeader',
	data () {
	  return {
      showAbs :true,
         opacityStyle :{
           opacity: 0
      }
	  }
	},
	methods:{
	  handleScroll () {
      //console.log('abcdef')
	    const top = document.documentElement.scrollTop
	    if(top > 60)
	    {
	      let opacity = top /140
	      opacity = opacity > 1 ? 1:opacity
	      this.opacityStyle = { opacity }
	      this.showAbs = false
	    }else
	    {
	      this.showAbs = true
	    }
	  }
	},
	activated () {//当使用keepalive时候
    console.log('abc')
	  window.addEventListener('scroll',this.handleScroll)
	},
  deactivated () {
    window.removeEventListener('scroll',this.handleScroll)
  }
}
</script>
<style lang="stylus" scoped>
 @import '~@/assets/styles/varibles.styl'
  .header-fixed
    display:flex
    height:$headerHeight
    line-height:$headerHeight
    background:$bgColor
    color:#fff
    text-align:center
    position:fixed
    left:0
    top:0
    right:0
    z-index:111
    .header-fixed-back
      text-align:center
      font-size:.4rem   
      width:50px
    .header-title
      flex:1
      text-align:center
  .header-abs
    position:absolute
    left:.2rem
    top:.2rem
    width:.6rem
    height:.6rem
    border-radius:.3rem
    background:rgba(0,1,1,.8)   
    z-index:10
    text-align:center
    line-height:0.6rem    
    .header-abs-back
      color:#fff
      font-size:.4rem
</style>